<template>
  <div>
    <el-table
      :cell-style="tablestyle"
      :header-cell-style="tablestyle"
      :data="viewData"
      @row-click="checkDetails"
      style="width: 100%">
      <el-table-column
        type="selection"
        width="45">
      </el-table-column>
      <el-table-column
        width="70"
        label="缺陷ID"
        show-overflow-tooltip
        prop="id">
      </el-table-column>
      <el-table-column
        width="100"
        show-overflow-tooltip
        label="缺陷名称"
        prop="title">
      </el-table-column>
      <el-table-column
        label="状态"
        width="80">
        <template slot-scope="scope">
          <span>{{ bugStatusOption[scope.row.bugStatus] }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="缺陷等级"
        prop="priority">
      </el-table-column>
      <el-table-column
        label="项目模块"
        prop="moduleName">
      </el-table-column>
      <el-table-column
        label="创建时间"
        width="150"
        prop="createTime">
      </el-table-column>
      <el-table-column
        width="150"
        label="最后更新时间"
        prop="updateTime">
      </el-table-column>
      <el-table-column
        label="提交者"
        prop="submitterName">
      </el-table-column>
      <el-table-column
        label="处理者"
        prop="handlerName">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="50"
      >
        <template slot-scope="scope">
          <!--handleEdit(scope.$index, scope.row)-->
          <span @click="editBug(scope.row)"><el-link type="primary" :underline="false">编辑</el-link></span>
          <!-- <span @click="editBug(scope.row)" v-show="scope.row.exampleId == null">
            <el-divider direction="vertical"></el-divider>
            <el-link type="primary" :underline="false">关联用例</el-link>
          </span> -->
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        class="pagination"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pagesize"
        prev-text="上一页"
        next-text="下一页"
        :page-sizes="[5, 7, 10, 15]"
        layout="total, sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { getBugsByHandlerId, getBugsByProId, getBugsBySubmitterId } from '@/api/bug'
  import { mapGetters } from 'vuex'
  import { formatTime } from '@/utils/validate'

  export default {
    name: 'bugTable',
    data(){
      return{
        pagesize: 7,        //分页每一页的数目
        currentPage: 1,     //标记当前的在第几页
        viewData:[],
        total: 0,
        bugStatusOption: ['新建','分配','打开','已解决','关闭','重新打开','拒绝'],
      }
    },
    computed:{
      ...mapGetters(['projectId','userInfo'])
    },
    methods:{
      //查看项目详情
      checkDetails(row){
        this.$parent.drawerBugInformationChange(row)
      },
      //分页条改变时调用的方法
      handleCurrentChange(val) {
        this.currentPage = val
        this.getBugs()
      },
      //点击编辑执行的方法
      editBug(row){
        let arr=JSON.stringify(row)
        this.$router.push("/proDetails/createBug?obj="+encodeURIComponent(arr))
      },
      //三个按钮触发的筛选
      radioChangeFilterData(label){
        switch (label) {
          case '全部': this.getBugs();break;
          case '我提交的': this.getBugsBySubmitterId();break;
          case '待我处理的': this.getBugsBySubmitter();break;
          default: this.getBugs();
        }

      },
      //修改每页数量多少时调用
      handleSizeChange(val){
        this.pagesize = val
        this.getBugs()
      },
      //居中样式的返回方法
      tablestyle(){
        return "text-align:left;"
      },
      //获取表格数据
      getBugs(){
        let params = {"current":this.currentPage,"size":this.pagesize}
        getBugsByProId(this.projectId ,params).then(res =>{
          for (let i = 0; i < res.data.records.length; i++){
            res.data.records[i].createTime = formatTime(res.data.records[i].createTime)
            res.data.records[i].updateTime = formatTime(res.data.records[i].updateTime)
          }
          this.viewData = res.data.records
          this.total = res.data.total
          console.log(this.viewData)
        })
      },//获取待我处理的bugs
      getBugsBySubmitter(){
        let params = {"current":1,"size":this.pagesize}
        let bug = {'proId':this.projectId,'handlerId':this.userInfo.id}
        getBugsByHandlerId(bug,params).then(res =>{
          for (let i = 0; i < res.data.records.length; i++){
            res.data.records[i].createTime = formatTime(res.data.records[i].createTime)
            res.data.records[i].updateTime = formatTime(res.data.records[i].updateTime)
          }
          this.viewData = res.data.records
          this.total = res.data.total
        })
      },//获取我提交的bugs
      getBugsBySubmitterId(){
        let params = {"current":1,"size":this.pagesize}
        let bug = {'proId':this.projectId,'submitterId':this.userInfo.id}
        getBugsBySubmitterId(bug,params).then(res =>{
          for (let i = 0; i < res.data.records.length; i++){
            res.data.records[i].createTime = formatTime(res.data.records[i].createTime)
            res.data.records[i].updateTime = formatTime(res.data.records[i].updateTime)
          }
          this.viewData = res.data.records
          this.total = res.data.total
        })
      }
    },
    mounted(){
      this.getBugs()
    }
  }
</script>

<style lang="scss" scoped>
  .pagination {
    margin-top: 20px;
    margin-right: 10px;
    text-align: right;
    ::v-deep .el-pagination__jump {
      float: left;
    };
    ::v-deep .el-pagination__total {
      float: left;
    };
    ::v-deep .el-pagination__sizes {
      float: left;
    }
  }
</style>
